<template>
  <div class="echartLayout">
    <div id="container" style="width:100%; height:100%; overflow:hidden;" ></div>
    <tanchuang ref="tanchuang"></tanchuang>
  </div>
</template>

<script>
  import echarts from 'echarts' 
  import tanchuang from "@/pages/tanchuang.vue"
  export default {
    name: "personRelation",
    data() {
      return {
        myChart: null,
        chartData:[],
        chartLink:[]
      }
    },
    mounted() {
      this.initEchart()
    },
    methods: {
      //参考 https://blog.csdn.net/GRAY_KEY/article/details/80532468
      initEchart() {
        var _this = this;
        let dom = document.getElementById("container");
        this.myChart = echarts.init(dom);
        this.chartData=this.dataEChart();
        this.chartLink=this.linkEChart();
        let option = {
          backgroundColor: '#EEFFEE',	// 背景颜色
          title: {                    // 图表标题
              text: "关系拓扑图",           // 标题文本
              left : '3%',                    // 标题距离左侧边距
              top : '3%',                     // 标题距顶部边距
              textStyle : {                       // 标题样式
                color : '#000',                     // 标题字体颜色
                fontSize : '30',                    // 标题字体大小
              }
          },
          tooltip: {                  // 提示框的配置
              formatter: function(param) {
                  console.log(param.dataType)
                  if (param.dataType === 'edge') {
                      //return param.data.category + ': ' + param.data.target;
                      return param.data.target;
                  }
                  //return param.data.category + ': ' + param.data.name;
                  return param.data.name;
              }
          },
          series: [
            {  
              type:'graph',// 系列类型:关系图
              top: '10%',  // 图表距离容器顶部的距离
              roam: true,// 是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移，可以设置成 'scale' 或者 'move'。设置成 true 为都开启
              focusNodeAdjacency: true,   // 是否在鼠标移到节点上的时候突出显示节点以及节点的边和邻接节点。[ default: false ]
              force: {                // 力引导布局相关的配置项，力引导布局是模拟弹簧电荷模型在每两个节点之间添加一个斥力，每条边的两个节点之间添加一个引力，每次迭代节点会在各个斥力和引力的作用下移动位置，多次迭代后节点会静止在一个受力平衡的位置，达到整个模型的能量最小化。                    // 力引导布局的结果有良好的对称性和局部聚合性，也比较美观。
	            repulsion:800,            // [ default: 50 ]节点之间的斥力因子(关系对象之间的距离)。支持设置成数组表达斥力的范围，此时不同大小的值会线性映射到不同的斥力。值越大则斥力越大
	            edgeLength: [30,50],    // [ default: 30 ]边的两个节点之间的距离(关系对象连接线两端对象的距离,会根据关系对象值得大小来判断距离的大小)，                           // 这个距离也会受 repulsion。支持设置成数组表达边长的范围，此时不同大小的值会线性映射到不同的长度。值越小则长度越长。如下示例                      // 值最大的边长度会趋向于 10，值最小的边长度会趋向于 50      edgeLength: [10, 50]
              },
              layout: "force",          // 图的布局。[ default: 'none' ]// 'none' 不采用任何布局，使用节点中提供的 x， y 作为节点的位置。// 'circular' 采用环形布局;'force' 采用力引导布局.
               symbol:"",//标记图像
               lineStyle: {            // 关系边的公用线条样式。其中 lineStyle.color 支持设置为'source'或者'target'特殊值，此时边会自动取源节点或目标节点的颜色作为自己的颜色。
                  normal: {
                      color: '#ccc',          // 线的颜色[ default: '#aaa' ]
                      width: 1,               // 线宽[ default: 1 ]
                      type: 'solid',          // 线的类型[ default: solid ]   'dashed'    'dotted'
                      opacity: 0.5,           // 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。[ default: 0.5 ]
                      curveness: 0            // 边的曲度，支持从 0 到 1 的值，值越大曲度越大。[ default: 0 ]
                  }
              },
              label:{   // 关系对象上的标签
                normal:{
                  show:true,
                  textStyle: {                // 文本样式
	                    fontSize: 12
	                }
                }
              },
              edgeLabel: {                // 连接两个关系对象的线上的标签
                normal: {
                    show: true,
                    textStyle: {                
                        fontSize: 12
                    },
                    formatter: function(param) { // 标签内容
                        return param.data.value;
                    }
                }
              },
              edgeSymbol:'circle',
              itemStyle:{
                normal:{
                  color: '#6495ED'
                },
                //鼠标放上去有阴影效果
                emphasis: {
                  shadowColor: '#FE9200',
                  shadowOffsetX: 0,
                  shadowOffsetY: 0,
                  shadowBlur: 20,
                },
              },
              symbolSize:50,
              links: this.chartLink,
              data:this.chartData
            }
          ],
          
        };
        this.myChart.setOption(option);
        this.myChart.on('click', function (params) {
          if(params.dataType=="node"){
            _this.showtanchuang();
          }
         
          
        });
      },
      showtanchuang(){
        this.$refs.tanchuang.show()
      },
      /**
       * 数据集合
       */
      dataEChart(){
        let data = [
          {
            name: '张1', 
            symbolSize: 100,
            id: '1',
            // y:"center"
          },
          // {
          //   name: '张2',
          //   id: '2',
          // },
          // {
          //   name: '张3',
          //   id: '3',
          // },
          // {
          //   name: '张4',
          //   id: '4',
          // },
          // {
          //   name: '张5',
          //   id: '5',
          // },
          // {
          //   name: '张6',
          //   id: '6',
          // },
          // {
          //   name: '张7',
          //   id: '7',
          // },
          // {
          //   name: '张8',
          //   id: '8',
          // },
          // {
          //   name: '张9',
          //   id: '9',
          // },
        ];
        return data;
      },
      /**
       * 关系数据集合
       */
      linkEChart(){
        let dataLink=[
          // {value: "同事",source: "1",target: "2"},
          // {value: "同事",source: "1",target: "3"},
          // {value: "同事",source: "1",target: "4"},
          // {value: "同学",source: "1",target: "5"},
          // {value: "同学",source: "1",target: "6"},
          // {value: "同学",source: "1",target: "7"},
          // {value: "爸爸",source: "1",target: "8"},
        ];
        return dataLink;
      },
    },
    components:{
      tanchuang
    }
  }
</script>

<style scoped>
  .echartLayout {
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
  }
</style>